<style>
    /* 已选区域容器 */
    .selected-list {
        margin-top: 15px;
        border: 1px solid #e4e9eb;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* 单个已选项 */
    .selected-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        border-bottom: 1px solid #f0f2f5;
        transition: all 0.2s;
        position: relative;
    }

    /* 鼠标悬停效果 */
    .selected-item:hover {
        background: #f8f9fa;
        transform: translateX(3px);
    }

    /* 区域文字样式 */
    .selected-item > span {
        flex: 1;
        color: #3c4a54;
        font-size: 13px;
        line-height: 1.5;
        padding-right: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 删除按钮样式 */
    .selected-item .remove-item {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #f56c6c;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .remove-item i {
        font-size: 12px;
    }

    /* 删除按钮悬停效果 */
    .selected-item .remove-item:hover {
        background: #f78989;
        transform: rotate(90deg);
    }

    /* 空状态提示 */
    .selected-list:empty::after {
        content: "暂无已选区域";
        color: #909399;
        font-size: 12px;
        display: block;
        padding: 12px;
        text-align: center;
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .selected-item {
            padding: 10px;
        }
        .selected-item > span {
            font-size: 14px;
        }
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group hide">
        <label class="control-label col-xs-12 col-sm-2">{:__('City_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-city_id" name="row[city_id]" type="text" value="{$city_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Vehicle_type')}:</label>
        <div class="col-xs-12 col-sm-8">
            <td><input name="row[vehicle_type]" data-rule="required" data-source="category/selectpage" class="form-control selectpage" data-params='{"custom[type]":"cartype","custom[pid]":0}' type="text" value="" size="30" placeholder="可输入关键字搜索"></td>
        </div>
    </div>


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">选择区域:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="fieldlist">
                <div class="fieldlist-item" data-template="area_tpl">
                    <div class="row">
                        <div class="col-sm-3">
                            <select class="form-control province" data-level="1">
                                <option value="">选择省份</option>
                                {volist name="provinceList" id="vo"}
                                <option value="{$vo.id}">{$vo.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <select class="form-control city" data-level="2" disabled>
                                <option value="">选择城市</option>
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <select class="form-control district" data-level="3" disabled>
                                <option value="">选择区县</option>
                            </select>
                        </div>
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-primary add-area">
                                <i class="fa fa-plus"></i> 添加
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 已选区域列表 -->
                <div id="selected-areas" class="selected-list">
                    {php}$selected = isset($row['area_ids']) ? explode(',',$row['area_ids']) : [];{/php}
                    {volist name="selected" id="areaId"}
                    {php}$area = \app\admin\model\Area::get($areaId);{/php}
                    <div class="selected-item">
                        <span>{$area->getFullName()}</span>
                        <input type="hidden" name="row[area_ids][]" value="{$areaId}">
                        <a href="javascript:;" class="btn btn-danger btn-xs remove-item">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Start_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-start_time" data-rule="required" class="form-control datetimepicker" data-date-format="HH:mm" data-use-current="true" name="row[start_time]" type="text" value="09:00">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('End_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-end_time" data-rule="required" class="form-control datetimepicker" data-date-format="HH:mm" data-use-current="true" name="row[end_time]" type="text" value="17:00">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-price" data-rule="required" class="form-control" step="0.01" name="row[price]" type="number">
        </div>
    </div>
<!--    <div class="form-group">-->
<!--        <label class="control-label col-xs-12 col-sm-2">{:__('Kilometer')}:</label>-->
<!--        <div class="col-xs-12 col-sm-8">-->
<!--            <input id="c-kilometer" data-rule="required" class="form-control" step="0.1" name="row[kilometer]" type="number">-->
<!--        </div>-->
<!--    </div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="0">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
